<template>
	<view>
		<view class="head">
			<text class="head-item1">3.10</text>
			<text class="head-item2">七日年化收益率(%)</text>
			<view class="head-bottom">
				<view class="head-bottom-left">
					<text>0.6948</text>
					<text>万份收益(03-07)</text>
				</view>
				<view class="head-bottom-right">
					<text>100.0000</text>
					<text>起购价格</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-title">
				<view class="line">

				</view>
				<text>七日年化收益曲线</text>
				<image style="width: 8px;height: 13px;" src="@/static/dueondemand/toright.png"></image>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData" background="none" />
				
			</view>
			<view class="charts-label">
				<view v-for="item in timeData" :key="item.id" :class="item.id == activeId ? 'active':'label-item'"  @tap="changetap(item.id)">
					{{item.text}}
				</view>
			</view>
			<view class="topbar">
				<view v-for="item in topbarData" :key="item.id" :class="item.id == topbarId ? 'topbar-active':'topbar-item'"  @tap="changetop(item.id)" >
					{{item.text}}
				</view>
			</view>
			<view class="swiperfather" :style="{height:`${swiperheight}`}">
				<swiper @change="changeswiper" :current="topbarId" class="swiper">
					<swiper-item >
						<scroll-view scroll-y="true">
							<view>
								<view class="list-item">
									<text style="font-size: 16px;">基本信息</text>
								</view>
								<view  class="list-item">
									<text>基金全称</text>
									<text>国金众赢货币市场证券投资基金</text>
								</view>
								<view  class="list-item">
									<text>基金代码</text>
									<text>001234</text>
								</view>
								<view  class="list-item">
									<text>基金类型</text>
									<text>货币型(低风险)</text>
								</view>
								<view  class="list-item">
									<text>基金状态</text>
									<text>开放交易</text>
								</view>
								<view  class="list-item">
									<text>成立日期</text>
									<text>2015-06-25</text>
								</view>
								<view class="list-item">
									<text>基金公司</text>
									<text>国金基金管理有限公司</text>
								</view>
								<view  class="list-item">
									<text>总规模</text>
									<text>821,788,01万份</text>
								</view>
								<view  class="list-item">
									<text>总资产</text>
									<text>82.21亿元</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true">
							<view class="card">
								<text class="card-title">购买规则</text>
								<uni-steps style="display:block" :options="[{title: 'T日15点前',desc:'购买'}, {title: 'T+1日17点后',desc:'确认份额'}, {title: 'T+2日',desc:'查看收益'}, {title: 'T+2日起',desc:'可赎回'}]"></uni-steps>
								<text class="card-text">*T日为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日</text>
								<view class="card-line">
									
								</view>
								<view class="card-bottom">
									<text>购买手续费</text>
									<text>无</text>
								</view>
							</view>
							<view class="card">
								<text class="card-title">赎回规则</text>
								<uni-steps style="display:block" :options="[{title: 'T日15点前',desc:'赎回'}, {title: 'T+1日17点后',desc:'确认份额及到账金额'}, {title: 'T+2日',desc:'24点前到账'}]"></uni-steps>
								<text class="card-text">*T日为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日</text>
								<view class="card-line">
									
								</view>
								<view class="card-bottom">
									<text>赎回手续费</text>
									<text>无</text>
								</view>
							</view>
							<view class="explain">
								<text>收益说明</text>
								<view class="explain-line">
									
								</view>
								<text class="explain-text">*货币基金收益每日发放，但每日到账收益不同。今日到账收益=昨日已确认份额*当日万份收益/10000。</text>
								<text class="explain-text">*购买确认当日起计算收益，赎回确认当日起不再计算收益。</text>
								<text class="explain-text">*鉴于每日到账收益不到0.01元时，系统可能不会更新收益，建议持有100元及以上</text>
							</view>
							<view class="foot-content">
								<text>基金销售服务由成都宇宁基金销售有限公司提供</text>
								<text>投资前请详细阅读基金合同，招募说明书。基金的过往业绩不预示其未来表现，市场有风险，投资需谨慎</text>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<navigator url="/pages/Current_purchase/Current_purchase">
			<view class="gopay">
				<button type="default">立即购买</button>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					"categories": [
						"01-28",
						"02-09",
						"02-26",
					],
					"series": [{
						"name": "成交量C",
						"data": [
							100,
							80,
							95,
							150,
						]
					}]
				},
				timeData:[
					{id:0,text:"近一月"},
					{id:1,text:"近三月"},
					{id:2,text:"近半月"},
					{id:3,text:"近一年"}
				],
				activeId:0,
				topbarData:[
					{id:0,text:"基金档案"},
					{id:1,text:"交易规则"},
					{id:2,text:"常见问题"}
				],
				topbarId:0,
				swiperheight:''
			}
		},
		methods: {
			changetap(value) {
				this.activeId = value
			
			},
			changetop(value) {
				this.topbarId = value
			
			},
			changeswiper(event){
				this.topbarId = event.detail.current
			}
		},
		watch:{
			topbarId(){
				if(this.topbarId == 0){
					this.swiperheight = 1000 + "rpx";
				}
				else if(this.topbarId == 1){
					this.swiperheight = 1560 + "rpx"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 214px;
		background-image: url(../../static/dueondemand/backgroundimage.png);
		color: white;
		overflow: hidden;

		.head-item1 {
			display: block;
			font-size: 24px;
			font-weight: bold;
			text-align: center;
			margin-top: 30rpx;
		}

		.head-item2 {
			display: block;
			font-size: 12px;
			text-align: center;
			color: #ddd;
			margin-top: 20rpx;
		}

		.head-bottom {
			margin-top: 40rpx;
			display: flex;

			.head-bottom-left {
				width: 50%;

				text:nth-child(1) {
					width: 100%;
					text-align: center;
					display: block;
					font-size: 18px;
					font-weight: bold;
				}

				text:nth-child(2) {
					display: block;
					font-size: 12px;
					color: #ddd;
					text-align: center;
					margin-top: 20rpx;
				}
			}

			.head-bottom-right {
				width: 50%;

				text:nth-child(1) {
					width: 100%;
					text-align: center;
					display: block;
					font-size: 18px;
					font-weight: bold;
				}

				text:nth-child(2) {
					display: block;
					font-size: 12px;
					color: #ddd;
					text-align: center;
					margin-top: 20rpx;
				}
			}
		}
	}

	.content {
		width: 100%;
		height: 300rpx;
		border-top-left-radius: 10pt;
		border-top-right-radius: 10pt;
		position: absolute;
		top: 165px;
		background-color: #fff;

		.content-title {
			width: 100%;
			height: 20px;
			margin-top: 30rpx;
			display: flex;
			line-height: 20px;

			.line {
				width: 5px;
				height: 16px;
				background-color: #3476f1;
				border-radius: 5pt;
				margin-left: 5pt;
				margin-top: 2px;
				margin-right: 5pt;
			}

			text {
				font-size: 15px;
				font-weight: bold;
			}

			image {
				vertical-align: middle;
				margin-top: 4px;
				margin-left: 155pt;
			}
		}

		.charts-box {
			width: 700rpx;
			height: 283px;
			margin: 0 auto;
		}
		.charts-label{
			width: 320px;
			height: 25px;
			margin: 0 auto;
			display: flex;
			.label-item{
				width: 80px;
				height: 100%;
				text-align: center;
				border:1px solid #ccc;
				font-size: 14px;
				line-height: 25px;
			}
			.active{
				background-color: #3476f1;
				width: 80px;
				height: 100%;
				text-align: center;
				border:1px solid #ccc;
				font-size: 14px;
				line-height: 25px;
				color: white;
			}
		}
		.topbar{
			width: 100%;
			height: 45px;
			margin-top: 10rpx;
			display: flex;
			margin-left: 30rpx;
			.topbar-item{
				width: 80px;
				height: 100%;
				text-align: center;
				font-size: 14px;
				line-height: 45px;
			}
			.topbar-active{
				color: #3476f1;
				width: 80px;
				height: 100%;
				text-align: center;
				font-size: 18px;
				line-height: 45px;
				border-bottom: 2px solid #3476f1;
				font-weight: bold;
			}
		}
		.swiperfather{
			width: 750rpx;
			height: 1000rpx;
			.swiper{
				width: 700rpx;
				height: 100%;
				margin: 0 auto;
				margin-top: 20px;
				.list-item{
					width: 100%;
					height: 45px;
					line-height: 45px;
					border-bottom: 1px solid #f5f7f9;
					text:nth-child(1){
						font-size: 13px;
						color: #ccc;
						display: inline-block;
						margin-left: 10px;
					}
					text:nth-child(2){
						font-size: 13px;
						margin-left: 10px;
					}
				}
				.card{
					width: 100%;
					height: 225px;
					border: 1px solid #f5f7f9;
					box-shadow: 0 0 1px 2px #f5f7f9;
					overflow: hidden;
					margin-bottom: 10px;
					.card-title{
						display: block;
						font-size: 14px;
						color: #ccc;
						margin-top: 10px;
						margin-left: 10px;
						margin-bottom: 10px;
					}
					.card-text{
						font-size: 13px;
						color: #ccc;
						display: block;
						margin-top: 10px;
						margin-left: 10px;
						margin-right: 10px;
					}
					.card-line{
						height: 1px;
						margin-left: 10px;
						margin-right: 10px;
						background-color: #f5f7f9;
						margin-top: 15px;
					}
					.card-bottom{
						width: 660rpx;
						margin: 0 auto;
						margin-top: 15px;
						display: flex;
						justify-content: space-between;
						text:nth-child(1){
							font-size: 14px;
							color: #ccc;
						}
						text:nth-child(2){
							font-size: 14px;
						}
					}
				}
				.explain{
					width: 100%;
					height: 170px;
					box-shadow: 0 0 1px 2px #f5f7f9;
					overflow: hidden;
					text:nth-of-type(1){
						font-size: 14px;
						color: #ccc;
						display: block;
						margin-top: 10px;
						margin-left: 10px;
					}
					.explain-line{
						height: 1px;
						margin-left: 10px;
						margin-right: 10px;
						background-color: #f5f7f9;
						margin-top: 10px;
					}
					.explain-text{
						font-size: 13px;
						color: #ccc;
						display: block;
						margin-top: 5px;
						margin-left: 10px;
						margin-right: 10px;
						text-overflow: ellipsis;
						white-space: wrap;
						overflow: hidden;
					}
					
				}
				.foot-content{
					width: 700rpx;
					margin: 0 auto;
					margin-top: 10px;
					text:nth-child(1){
						font-size: 13px;
						color: #646464;
						display: block;
						margin-left: 10px;
					}
					text:nth-child(2){
						font-size: 11px;
						margin-left: 10px;
						display: block;
						margin-top: 5px;
						color: #646464;
					}
				}
			}
		}
	}

	.gopay {
		width: 100%;
		height: 45px;
		position: fixed;
		top: 690px;

		button {
			margin: 0;
			padding: 0;
			border-radius: 0;
			background-color: #3476f1;
			color: white;
			font-size: 14px;
			border: none;
		}
	}
</style>
